<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue"
import * as echarts from 'echarts';
import { request } from "@/utils/service"

defineOptions({
  // 命名当前组件
  name: "ElementPlus"
})

interface InnerTable{
  name: string,
  type: string,
  data: number[]
}

interface TableData {
  xAxis: string[],
  yAxis: InnerTable[]
}

function getTableDataApi() {
  return request<TableData>({
    url: "statistic/getSumOfTypeOnRoute",
    method: "get",
  })
}

onMounted(() => {
  var chartDom = document.getElementById('my_main');
  var myChart = echarts.init(chartDom);

  getTableDataApi()
    .then((data) => {
      // myChart.setOption(option)
      myChart.setOption({
        title: {
          text: '按照线路统计不同车型的数量'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        // grid: {
        //   left: '3%',
        //   right: '4%',
        //   bottom: '3%',
        //   containLabel: true
        // },

        xAxis: {
          type: 'category',
          // data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
          data: data.data.xaxis, //线路
          name: "线路"
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          name: "数量"
        },
        // series: [
        //   {
        //     name: '2011',
        //     type: 'bar',
        //     data: [18203, 23489, 29034, 104970, 131744, 630230]
        //   },
        //   {
        //     name: '2012',
        //     type: 'bar',
        //     data: [19325, 23438, 31000, 121594, 134141, 681807]
        //   }
        // ]
        series: data.data.yaxis
      });
    })
    .catch(() => {
      // tableData.value = undefined
    })
})

</script>

<template>
  <div class="app-container">
    <div id="my_main" style="height: 600px;width: 800px;" ></div>
  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}
</style>
